<script setup>
// 表单校验（账号名+密码）

import { onMounted, ref } from 'vue'

import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
import { useRouter } from 'vue-router'

import { useUserStore } from '@/stores/userStore'

//引入接口
import { loginAPI, registerAPI, getPhoneCodeAPI, codeLoginAPI } from '@/apis/user.js'

import { useRoute } from 'vue-router'

const route = useRoute()
const userStore = useUserStore()

//0:登录  1:注册
let loginPageType = ref(0)
//0:密码登录  1:验证码登录
let logintype = ref(0)

onMounted(() => {
	if (route.query.pageType) {
		loginPageType.value = route.query.pageType
	}
})
// 准备密码登录表单对象
const form = ref({
	userName: '',
	password: '',
	agree: true
})
// 准备验证码登录表单对象
const codeLoginForm = ref({
	userName: '',
	loginCode: '',
	agree: true
})

//登录
const router = useRouter()
const doLogin = async () => {
	let formData = {}

	//发送请求
	//判断登录方式
	let res = null
	if (logintype.value === 0) {
		// console.log(form.value.userName == "" || form.value.password == '',123465);
		if (form.value.userName == '' || form.value.password == '') return
		formData = {
			principal: form.value.userName,
			credentials: form.value.password,
			sysType: 0
		}
		res = await userStore.userLogin(formData)
	} else {
		if (codeLoginForm.value.userName == '' || codeLoginForm.value.loginCode == '') return
		formData = {
			userName: codeLoginForm.value.userName,
			verifyCode: codeLoginForm.value.loginCode,
			mobile: codeLoginForm.value.userName,
			sysType: 3
		}
		res = await userStore.userCodeLogin(formData)
	}
	//判断登录是否成功
	if (res.code == '00000') {
		//获取用户信息
		let InfoRes = await userStore.getUserInfo()
		//判断获取用户信息是否成功
		if (InfoRes.code == '00000') {
			//提示用户
			ElMessage({
				type: 'success',
				message: '登录成功'
			})
			loginPageType.value = 0
			// 2. 跳转首页
			router.replace({
				path: '/'
			})
		} else {
			ElMessage({ type: 'error', message: InfoRes.msg })
		}
	} else {
		ElMessage({ type: 'error', message: res.msg })
	}
}
//获取验证码
const codeNum = ref(0)
const isClickSend = ref(false)
const pattern = /^1[34578]\d{9}$/g
let clearId = null
const sendCode = async () => {
	if (codeNum.value > 0) return
	// console.log(pattern.test(codeLoginForm.value.userName), codeLoginForm.value.userName)
	if (pattern.test(codeLoginForm.value.userName)) {
		ElMessage({ type: 'error', message: '手机号格式错误' })
		return
	}
	isClickSend.value = true
	const res = await getPhoneCodeAPI(codeLoginForm.value.userName)
	// console.log(res)
	codeNum.value = 60
	if (clearId) clearInterval(clearId)
	clearId = setInterval(() => {
		codeNum.value--
		if (codeNum.value == 0) {
			clearInterval(clearId)
		}
	}, 1000)
}

//注册

const doRegister = async () => {
	//整理数据
	const { userName, loginCode } = codeLoginForm.value
	if ((userName == '') & (loginCode == '')) return
	let formData = {
		userName: userName,
		verifyCode: loginCode,
		mobile: userName,
		sysType: 3
	}

	//发送请求
	let res = await userStore.userCodeLogin(formData)
	//判断注册是否成功
	if (res.code == '00000') {
		// 提示用户
		ElMessage({
			type: 'success',
			message: '注册成功，请登录'
		})
		codeLoginForm.value = {
			userName: '',
			loginCode: '',
			agree: true
		}
		if (clearId) clearInterval(clearId)
		codeNum.value = 0
		loginPageType.value = 0
		let InfoRes = await userStore.getUserInfo()
		//判断获取用户信息是否成功
		if (InfoRes.code == '00000') {
			//提示用户
			ElMessage({
				type: 'success',
				message: '登录成功'
			})
			loginPageType.value = 0
			// 2. 跳转首页
			router.replace({
				path: '/'
			})
		} else {
			ElMessage({ type: 'error', message: InfoRes.msg })
		}
	} else {
		ElMessage({ type: 'error', message: res.msg })
	}

	// // 提示用户
	// ElMessage({
	// 	type: 'success',
	// 	message: '注册成功，请登录'
	// })
	// loginPageType.value = 0
}
const readyLogin = () => {
	if (loginPageType.value == 0) {
		doLogin()
	} else {
		doRegister()
	}
}
// 1. 用户名和密码 只需要通过简单的配置（看文档的方式 - 复杂功能通过多个不同组件拆解）
// 2. 同意协议  自定义规则  validator:(rule,value,callback)=>{}
// 3. 统一校验  通过调用form实例的方法 validate -> true
</script>


<template>
	<div class="login-mainBox">
		<RouterLink :to="`/`">
			<div class="login-logoImage">
				<img src="@/assets/images/login-images/Group@2x.png" alt="" />
			</div>
		</RouterLink>
		<div class="login-form">
			<p class="login-title">密码登录</p>
			<div class="login-formInfo">
				<template v-if="logintype === 0">
					<div class="login-userNumber login-input">
						<p class="input-name">手机号</p>
						<div class="input-mainInput">
							<input type="text" v-model="form.userName" @keydown.enter="readyLogin" />
						</div>
					</div>
					<div class="login-passWord login-input">
						<p class="input-name">密码</p>
						<div class="input-mainInput">
							<input type="password" v-model="form.password" @keydown.enter="readyLogin" />
						</div>
					</div>
				</template>
				<template v-else>
					<div class="login-userNumber login-input">
						<p class="input-name">手机号</p>
						<div class="input-mainInput">
							<input type="text" v-model="codeLoginForm.userName" @keydown.enter="readyLogin" />
						</div>
					</div>
					<div class="login-passWord login-input">
						<p class="input-name">验证码</p>
						<div class="input-mainInput">
							<input type="text" v-model="codeLoginForm.loginCode" @keydown.enter="readyLogin" />
						</div>
						<div class="loginCode-button">
							<div class="get-loginCode" v-if="codeNum < 1" @click="sendCode">获取验证码</div>
							<div class="after-getCode" v-else>{{ codeNum }}秒后重试</div>
						</div>
					</div>
				</template>
			</div>
			<div class="login-userHelp">
				<p class="userHelp-title">没有账号？</p>
				<p
					class="userHelp-join"
					@click="
						() => {
							loginPageType = 0
						}
					"
					v-if="loginPageType"
				>
					立即登录
				</p>
				<p
					class="userHelp-join"
					@click="
						() => {
							loginPageType = 1
							logintype = 1
						}
					"
					v-else
				>
					立即注册
				</p>
				<p class="userHelp-resetPassWord">忘记密码</p>
			</div>
			<div class="login-loginButton" @click="doRegister" v-if="loginPageType">注册</div>
			<div class="login-loginButton" @click="doLogin" v-else>登录</div>
			<div>
				<div
					class="changeType-button"
					v-if="logintype == 0"
					@click="
						() => {
							logintype = 1
							loginPageType = 0
						}
					"
				>
					手机号验证码登录
				</div>
				<div
					class="changeType-button"
					v-else
					@click="
						() => {
							logintype = 0
							loginPageType = 0
						}
					"
				>
					账号密码登录
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped lang='scss'>
.login-mainBox {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-size: 100% 100%;
	background-image: url(@/assets/images/login-images/Group_3543@2x.png);

	.login-logoImage {
		width: 379px;
		height: 87px;
		position: fixed;
		top: 61px;
		left: 85px;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.login-form {
		width: 588px;
		height: 654px;
		background: #ffffff;
		border-radius: 10px 10px 10px 10px;
		position: fixed;
		top: 160px;
		right: 125px;
		box-sizing: border-box;
		padding: 122px 65px 0;

		.login-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 29px;
			color: #000000;
			text-align: left;
			margin-bottom: 42px;
		}

		.login-formInfo {
			.login-input {
				box-sizing: border-box;
				width: 458px;
				height: 67px;
				border-radius: 8px 8px 8px 8px;
				border: 2px solid #dadada;
				display: flex;
				align-items: center;
				padding-left: 23px;

				.input-name {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 21px;
					color: rgba(153, 153, 153, 1);
					width: 63px;
				}

				.input-mainInput {
					height: 100%;
					flex: 1;
					padding: 0 23px;

					input {
						width: 100%;
						height: 100%;
						font-size: 21px;
					}
				}
				.loginCode-button {
					width: 150px;
					height: 45px;
					margin-right: 13px;
					overflow: hidden;
					.get-loginCode {
						width: 100%;
						height: 100%;
						background: rgba(195, 13, 35, 0.1);
						border-radius: 11px 11px 11px 11px;
						border: 3px solid #c30d23;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 22px;
						color: #c30d23;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.after-getCode {
						width: 100%;
						height: 100%;
						border-radius: 11px 11px 11px 11px;
						border: 3px solid #dadada;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 22px;
						color: rgba(102, 102, 102, 1);
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}

			.login-userNumber {
				margin-bottom: 20px;
			}

			.login-passWord {
				margin-bottom: 16px;
			}
		}

		.login-userHelp {
			display: flex;
			justify-content: center;
			margin-bottom: 66px;

			p {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 19px;
			}

			.userHelp-title {
				color: #999999;
			}

			.userHelp-join {
				flex: 1;
				color: rgba(1, 128, 218, 1);
			}

			.userHelp-resetPassWord {
				color: rgba(34, 140, 246, 1);
			}
		}
	}

	.login-loginButton {
		width: 458px;
		height: 67px;
		background: #c30e23;
		border-radius: 8px 8px 8px 8px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 500;
		font-size: 21px;
		color: #ffffff;
	}
	.changeType-button {
		color: rgba(195, 14, 35, 1);
		font-size: 20px;
		margin-top: 20px;
		text-align: center;
	}
}
</style>